<template>
  <div class="card">
    <div class="card-header">
      <h2>{{ title }}</h2>
    </div>
    <div class="card-body">
      <p>{{ content }}</p>
      <ChildComponent />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const title = ref('Scoped CSS Demo')
const content = ref('这是一个演示Scoped CSS的示例组件')
</script>

<!-- 父组件的作用域样式 -->
<style scoped>
.card {
  border: 1px solid #ddd;
  border-radius: 8px;
  margin: 16px;
  overflow: hidden;
}

.card-header {
  background-color: #f5f5f5;
  padding: 16px;
  border-bottom: 1px solid #ddd;
}

.card-header h2 {
  margin: 0;
  color: #333;
  font-size: 1.5em;
}

.card-body {
  padding: 16px;
}

/* 深度选择器示例 */
:deep(.child-component) {
  margin-top: 16px;
  padding: 16px;
  background-color: #f9f9f9;
}
</style>

<!-- 全局样式 -->
<style>
/* 这些样式将影响所有组件 */
body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
}
</style>
